<template>
  <el-card class="container">
    <el-row :gutter="32" v-if="chatrTrendData.allAmount">
      <!-- 左侧 -->
      <el-col :span="6">
        <!-- 数据模块 -->
        <trendData :data="chatrTrendData"/>
      </el-col>
      <el-col :span="18">
        <!-- 图表模块 -->
        <trend-chart :data="chatrTrendData"/>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup >
import trendData from './trend-data.vue'
import trendChart from "./trend-chart.vue";
import { getChartTrend } from "@/api/chart.js";
//导入countUp让数字动起来的库
import {CountUp} from 'countup.js'
import { ref } from "vue";

//获取可视化数据
const chatrTrendData = ref({});
const getChartTrendData = () => {
  //发送请求数据
  getChartTrend().then((res) => {
    chatrTrendData.value = res;
    console.log(res);
  });
};
getChartTrendData();
</script>

<style scoped>
.container {
  height: 286px;
}
</style>